@import "base";
body{
    -webkit-overflow-scrolling:touch;
}
.detail-head{
    width: 100%;
    height: px2rem(360px, $base-font-size);
    background-size: 100%;
    position: relative;
    overflow: hidden;
    .detail-head-title{
        color: #fff;
        @include px2px('font-size', 30);
        padding: px2rem(18px, $base-font-size);
        position: absolute;
        bottom: 0;
        @include px2px('line-height', 44);
        background-color: rgba(0,0,0,0.4);
        width: 100%;
    }
    .mjtj{
        position: absolute;

        right: px2rem(58px, $base-font-size);
        top: px2rem(18px, $base-font-size);
        color: #fff;
        background: rgba(0,0,0,0.4);
        height: px2rem(70px, $base-font-size);
        width: px2rem(130px, $base-font-size);
        display: flex;
        @include px2px('font-size', 30);
        align-items: center;
        justify-content: center;
        .mjtj-banyuan-left, .mjtj-banyuan-right{
            height: px2rem(70px, $base-font-size);
            width: px2rem(35px, $base-font-size);
            position: absolute;
            background: rgba(0,0,0,0.4);;
        }
        .mjtj-banyuan-left{
            border-radius: 50% 0 0 50%;
            left: - px2rem(35px, $base-font-size);
        }
        .mjtj-banyuan-right{
            border-radius: 0 50% 50% 0;
            right: - px2rem(35px, $base-font-size);
        }

    }
}

.detail-item{
    margin: px2rem(18px, $base-font-size);
    padding: px2rem(18px, $base-font-size);
    background: #F4F4F4;
    @include px2px('line-height', 44);
    color: #3C3C3C;
    @include px2px('font-size', 24);
    border-radius: 10px;
    overflow: hidden;
    img{
        width: 100%;
    }
    .detail-item-content{
        div{
            display: flex;
            span{
                color: #FF9C00;
                @include px2px('font-size', 28);
                margin: 0 px2rem(18px, $base-font-size);
            }
        }
    }

    .detail-title{
        @include px2px('font-size', 28);
        span{
            color: #FF9C00;
        }
    }
    .xingxing{
        display: flex;
        flex-direction: row;
        align-items: center;
        div{
            width: px2rem(26px, $base-font-size);
            height: px2rem(26px, $base-font-size);
            background: url('../imgs/xingxing-no@2x.png');
            background-size: 100%;
            margin: 0 px2rem(9px, $base-font-size);
        }
        .active{
            background: url('../imgs/xingxing@2x.png');
            background-size: 100%;
        }
    }
}
// .detail-footer{
//     margin-bottom: px2rem(240px, $base-font-size);
// }


.empty{
    width: 100%;
    height: px2rem(120px, $base-font-size);
}

.baoming{
    width: px2rem(90px, $base-font-size);
    border-radius: 50%;
    height: px2rem(90px, $base-font-size);
    padding: px2rem(20px, $base-font-size);
    position: fixed;
    bottom: 30%;
    right: px2rem(20px, $base-font-size);
    @include px2px('font-size', 32);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF9C00;
    color: #fff;
    text-align: center;
}

.mtjj{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    img{
        width: px2rem(345px, $base-font-size);
        height: px2rem(345px, $base-font-size);
        margin-bottom: px2rem(9px, $base-font-size);
    }
}
